<template>
	<view>
		<scroll-view scroll-y scroll-with-animation class="main">
			<view class="bk-white">
				<view class="lay-fs-c pd-h-sm pd-v-md solid-bottom line-white-gray">
					<view class="group-flg bk-green mg-sm mg-l--sm"></view>
					<text class="title">{{raceInfo.raceName}}</text>
				</view>
				<view class="rows">
					<!-- <view>
						<text class="left">报名时间:</text>
						<text class="right">{{raceInfo.signDateRange}}</text>
						<text class="flex1"></text>
					</view>
					<view>
						<text class="left">抽签时间:</text>
						<text class="right">{{raceInfo.drawLotTimeRange}}</text>
						<text class="flex1"></text>
					</view>
					<view>
						<text class="left">比赛时间:</text>
						<text class="right">{{raceInfo.raceTimeRange}}</text>
						<text class="flex1"></text>
					</view> -->
					<view>
						<text class="left">报名费用:</text>
						<text class="right">{{raceInfo.racePrice}}元</text>
						<text class="flex1"></text>
					</view>
					<view>
						<text class="left">报名人数:</text>
						<text class="right">{{raceInfo.enterForCount}} / {{raceInfo.racePersonNum}}</text>
						<text class="flex1"></text>
					</view>
					<view>
						<text class="left">举办地点:</text>
						<text class="right">{{raceInfo.merAddress}}</text>
						<text class="hspace-xs flex1"></text>
						<span class="iconfont">&#xe6bd;</span>
					</view>
				</view>
			</view>
			
			<view class="vspace-sm"></view>
			
			<view class="lay-fs-c pd-h-sm pd-v-md bk-white solid-bottom line-white-gray">
				<view class="group-flg bk-green mg-sm mg-l--sm"></view>
				<text class="title">已报名参加的人（{{raceInfo.enterForCount}}人已报名）</text>
				<text class="hspace-xs flex1"></text>
				<view @click="goSignUpPlayers">查看更多<span class="iconfont">&#xe6bd;</span></view>
			</view>
			<view style="background-color:white; padding:20rpx; white-space:pre-wrap" class="lay-fs-c">
				<view v-for="(player, index) in raceInfo.signUpPlayers" :key="index" class="mg-r-md">
					<image class="avatar lg round" :src="player.avatar" />
				</view>
			</view>
			
			<view class="vspace-sm"></view>
			
			<view class="lay-fs-c pd-h-sm pd-v-md bk-white solid-bottom line-white-gray">
				<view class="group-flg bk-green mg-sm mg-l--sm"></view>
				<text class="title">详细介绍</text>
			</view>
			<!-- <rich-text :nodes="raceInfo.detail"></rich-text> -->
			<!-- <textarea style="width: 100%; height:auto;" v-model="raceInfo.detail"/> -->
			<view style="background-color:white; padding:20rpx; white-space:pre-wrap">{{raceInfo.detail}}</view>
		</scroll-view>
		
		<view class="bottom-bar">
			<view class="pd-l-md iconfont icon-shouye4" @click="goHome">&nbsp;首页</view>
			
			
			<!-- raceState: 0-等待开启报名, 1-报名中, 2-报名结束(摇号开始) 3-比赛中, 4-比赛结束 -->
			 <!--0-未开始 1-报名中 2-报名完 3-签到中 4-签到完 5-赛事中 6-赛事完 -->
			<button v-if="raceState==0" class="btn bk-green white mg-md" style="width: 40%; height: 100%; opacity: 0.6;">等待开启报名</button>
			<block v-else>
				<button v-if="myState && myState.audit_state==2" class="btn white mg-md" style="width: 70%; background-color: red; height: 100%; opacity: 1;">报名审核失败，请联系赛事主办方</button>
				<block v-else>
					<block v-if="raceState==1">
						<button v-if="!myState" class="btn bk-green white" style="width: 40%; height: 100%;" @click="goGoodsDetail">买票报名</button>
						<block v-else>
							<button v-if="myState.audit_state==0" class="btn bk-green white mg-md" style="width: 40%; height: 100%; opacity: 0.6;">报名成功，待审核</button>
							<button v-if="myState.audit_state==1" class="btn bk-green white mg-md" style="width: 40%; height: 100%; opacity: 0.6;">审核通过，待抽签</button>
						</block>
					</block>
					<block v-if="raceState==2">
						<button class="btn bk-green white mg-md" style="width: 40%; height: 100%; opacity: 0.6;">报名结束</button>
					</block>
					<block v-if="raceState==3">
						<!-- <button v-if="myState" class="btn bk-green white mg-md" style="width: 40%; height: 100%;" @click="goDrawLots">现场签到.抽签</button> -->
						<button v-if="myState" class="btn bk-green white mg-md" style="width: 40%; height: 100%;" @click="goMyRace">赛事进程</button>
					</block>
					<block v-if="raceState==4">
						<!-- <button class="btn bk-green white mg-md" style="width: 40%; height: 100%; opacity: 0.6;">签到结束</button> -->
						<button v-if="myState" class="btn bk-green white mg-md" style="width: 40%; height: 100%;" @click="goMyRace">赛事进程</button>
					</block>
					<block v-if="raceState==5">
						<button v-if="openScore==1" class="btn bk-green white" style="width: 40%; height: 100%;" @click="goRaceScorePage">查询成绩</button>
						<!-- <button v-if="myState" class="btn bk-green white mg-md" style="width: 40%; height: 100%;" @click="goDrawLots">现场签到.抽签</button> -->
						<button v-if="myState" class="btn bk-green white mg-md" style="width: 40%; height: 100%;" @click="goMyRace">赛事进程</button>
					</block>
					<block v-if="raceState==6">
						<button class="btn bk-green white" style="width: 40%; height: 100%;" @click="goRaceScorePage">查询成绩</button>
					</block>
				</block>
			</block>
		</view>
	</view>
	
</template>

<script>
	import {
		getRaceById
	} from '@/api/fsh.js';
	
	const app = getApp();
	
	export default {
		data() {
			return {
				raceInfo: {
					raceName: "",
					signDateRange: '',		// 报名起止时间
					drawLotTimeRange: '', 	// 抽签起止时间
					raceTimeRange: '',		// 比赛起止时间
					startTime: '',
					endTime: '',
					racePrice: '',
					enterForCount: 0, // 报名人数
					racePersonNum: '',
					merAddress: '',
					detail: '',
					signUpPlayers:[/*{
						avatar: "https://thirdwx.qlogo.cn/mmopen/vi_32/61wW7hT9648gqO9oTpSf2RSrsw07YzWgnGWSianfWUrd3WRw9xtHFeiciaxKfVscsdIia2cBHIwqib4nXOF5LyKMk7w/132",
						isRefund: 0,
						nickname: "孟辉",
						phone: "13632757673",
						realName: ""
					}*/]
				},
				openScore: 0,
				productId: 0,
				raceState: 0, 				// 0-等待开启报名, 1-报名中, 2-2-报名结束(摇号开始) 3-比赛中, 4-比赛结束
				myState: {
					audit_state: 0, 	// 报名审核状态：0-wait audit, 1-pass, 2-reject
					sign_in_state: 0,	// 签到状态：0-not sign in, 1-sign in
				}
			}
		},
		onLoad(options) {
			this.raceId = options.raceId;
			this.loadRace();
		},
		
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP		
		// 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
		onShareAppMessage(res) {
			return {
				title: this.raceInfo.raceName,
				path: '/pages/fsh_race/race_detail?raceId='+this.raceId,
				imageUrl: this.productImage
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.raceInfo.raceName,
				path: '/pages/fsh_race/race_detail?raceId='+this.raceId,
				imageUrl: this.productImage
			}
		},
		// #endif
		
		methods: {
			loadRace() {
				getRaceById(this.raceId).then(res => { // fshsrv/race.js/pub_getRaceDetail
					console.log("getRaceById",res.entity)
					this.raceInfo = res.entity.race;
					this.raceInfo.raceName = res.entity.prod.storeName;
					
					this.raceInfo.signDateRange = res.entity.race.signDateRange;
					this.raceInfo.drawLotTimeRange = res.entity.race.drawLotTimeRange;
					this.raceInfo.raceTimeRange = res.entity.race.raceTimeRange;
					
					this.raceInfo.racePrice = res.entity.prod.price;
					
					this.raceInfo.enterForCount = res.entity.enterForCount;
					
					this.raceInfo.racePersonNum = res.entity.race.number_of_players;
					
					// 将unicode转为字符串
					// this.raceInfo.detail = eval(res.entity.prodContent.content); // 微信小程序不支持eval
					// this.raceInfo.detail = unescape(res.entity.prodContent.content.replace(/\\u/g, '%u'));
					this.raceInfo.detail = JSON.parse(res.entity.prodContent.content);
					
					this.raceInfo.merAddress = res.entity.merchant.merAddress + " - " + res.entity.merchant.merName;
					
					this.productId = res.entity.prod.productId;
					this.productImage = res.entity.prod.image;
					
					this.openScore = res.entity.race.open_score;
					this.raceState = res.entity.raceState;
					
					this.myState = res.entity.myState;
					
					app.globalData.race = res.entity.race;
					app.globalData.race_signUpPlayers = res.entity.signUpPlayers;
					this.raceInfo.signUpPlayers = res.entity.signUpPlayers.slice(0, 7);
					
					app.globalData.race_score = res.entity.score;
				}).catch(err => {
					console.log("getRaceById fail, err=%o", err)
					this.$util.Tips({title: err.msg}, {tab: 3, url: 1}); // 提示并返回上一页面
				});
			},
			
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			
			goSignUpPlayers() {
				uni.navigateTo({
					url: `/pages/fsh_race/race_players`
				})
			},
			
			goRaceScorePage() {
				uni.navigateTo({
					url: `/pages/fsh_race/race_score?raceId=${this.raceId}`
				})
			},
			
			// 去商品详情页
			goGoodsDetail() {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${this.productId}`
				})
			},
			
			// 进入抽签页面
			goDrawLots() {
				uni.navigateTo({
					url: `/pages/fsh_race/draw_lots?raceId=${this.raceId}`
				})
			},
			
			//进入我的赛事
			goMyRace() {
				uni.navigateTo({
					url: '/pages/fsh_race/my_race_list'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/leui.scss";
	
	
	.mg-l--sm { margin-left: -$sm; }
	
	page {
		background-color: $my-page-bkg-color;
	}
	
	.rows {
		>view {
			@extend .pd-h-md;
			@extend .pd-v-sm;
			@extend .lay-c-c;
		}
		.left {
			@extend .mg-r-sm;
		}
	}
	
	$bottom-bar-height: 70rpx;
	
	.bottom-bar {
		height: $bottom-bar-height;
		@extend .lay-sb-c-c;
		@extend .solid-top;
		@extend .line-little-gray;
	}
	.main {
		white-space: initial;
		height:calc(100vh - #{$bottom-bar-height}); // 对scss变量做calc计算不能直接使用$swiperHeight，要加#{}
	}
</style>
